<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<header>
	   <div id="header">
        <p>欢迎光临<a href="#">china-pub网上书店</a>&nbsp;&nbsp;<a href="#">[登录]</a>&nbsp;&nbsp;<a href="#">[注册]</a></p>
        <ul>
            <li>我的china-pub<img src="images/down.jpg">|&nbsp;<img src="images/cell.png"></li>
            <li><a href="#">手机互动</a>|</li>
            <li><a href="#">图书团购</a>|</li>
            <li><a href="#">购书卡</a>|</li>
            <li><a href="#">帮助中心</a>|<img src="images/down.jpg"></li>
            <li><a href="#">在线咨询</a>&nbsp;&nbsp;<img src="images/weibo.png">&nbsp;<img src="images/tenxunweibo.png">&nbsp;<img src="images/weixin.png"></li>
        </ul>
       </div>
	</header>
	<div id="header-2">
	   <div id="header-a">
        <img src="images/logo.png">
        <div class="sosuo">

            <input type="text" placeholder="大数据" class="txt"><button>搜索</button>&nbsp;&nbsp;高级搜索<br>
            <ul>
                <li>热门搜索:</li>
                <li>算法</li>
                <li>python</li>
                <li><span>数据分析</span></li>
                <li>android</li>
                <li><span>微信</span></li>
                <li><span>汽车保养内幕</span></li>
            </ul>
            </div>
            <div class="gowu">购物车0件</div>
       </div>
	</div>
	<nav>
       <ul>
          <li class="first">全部图书分类&nbsp;<img src="images/list.png"></li>
          <li>首页|</li>
          <li>手机互动|</li>
          <li>新书|</li>
          <li>特价书|</li>
          <li>赠书|</li>
          <li>教材|</li>
          <li>电子书|</li>
          <li>视频教程|</li>
          <li>按需印刷|</li>
          <li>在线阅读|</li>
          <li>排行榜|</li>
          <li>书评</li>
       </ul>
	</nav>
	<main>
       <div class="title">
          <a href="#">全部分类</a>
          <p>使用<span>大数据</span>搜索，共有<span>835种</span>商品</p> 
       </div>
       <div id="content">
           <div class="left">
               <ul>
                  <h3>图书分类</h3>
                  <li>计算机<span>(389)</span></li>
                  <li>经济管理<span>(239)</span></li>
                  <li>社会科学<span>(48)</span></li>
                  <li>工业技术<span>(30)</span></li>
                  <li>教育<span>(25)</span></li>
                  <li>机械工业出版社分类专区<span>(10)</span></li>
                  <li>法律<span>(8)</span></li>
                  <li>建筑<span>(7)</span></li>
                  <li>数学<span>(4)</span></li>
                  <li>考试<span>(4)</span></li>
                  <li>少儿<span>(3)</span></li>
                  <li>政治/军事<span>(2)</span></li>
                  <li>自然科学<span>(2)</span></li>
                  <li>通信<span>(2)</span></li>
                  <li>进口图书<span>(2)</span></li>
                  <li>孕产/育儿<span>(1)</span></li>
                  <li>文化<span>(1)</span></li>
                  <li>医学<span>(1)</span></li>
               </ul>
           </div>
           <div class="right">
              <ul class="list">
                  <li class="p1">排序:</li>
                  <li class="p2">关注度<img src="images/search_down_arr.gif"></li>
                  <li>销量<img src="images/search_down_arr.gif"></li>
                  <li>价格<img src="images/search_down_arr.gif"></li>
                  <li>书评数<img src="images/search_down_arr.gif"></li>
                  <li>读者评分<img src="images/search_down_arr.gif"></li>
                  <li>出版时间<img src="images/search_down_arr.gif"></li>
                  <li>上架时间<img src="images/search_down_arr.gif"></li>
              </ul>
              <ul class="list1">
                <li>筛选:</li>
                <li>全部</li>
                <li>电子书(1)</li>
              </ul>
              <div class="nie">
             <!--  <dl>
                  <dt><img src="images/1.jpg"></dt>
                  <dd>
                     <h5>大数据之路:阿里巴巴大数据实践</h5>
                     <p>阿里巴巴数据技术及产品部</p>
                     <a>[0人评价]</a>
                     <div class="d1"><span>vip价:￥59.25(7.5折)</span><del>￥79.00</del><span><img src="images/result_buy.jpg"><img src="images/result_tuan.jpg"><img src="images/result_fav.jpg"></span></div>
                  </dd>
              </dl> -->
              </div>
              <div id="ye">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
					<li style="border:none">...</li>
					<li>42</li>
					<li style="width:60px">下一页</li>
				</ul>
			</div>
			<div id="chong">
				<h3>重新搜索</h3>
					<div class="k1">
						<input type="text" placeholder="大数据" name="" id="text" value="" /><input type="button" name="" id="btn" value="搜索" />
					</div>
				<h5><span class="blue">在结果中学习</span></h5>
			</div>
			<div class="di">
				<p>您是否找到了要查询的内容？</p>
				<p>如果您需要帮助，请<span class="blue">向客服提问</span>或者访问<span class="blue">帮助中心</span></p>
			</div>
           </div>
       </div>
	</main>
	<footer>
       <div class="f1">
          <div class="f1-top">
               <ul>
                  <h3>售后服务电话</h3>
                  <span>400 098 9991</span>
                  <li>工作时间:</li>
                  <li>7:30-19:30(周一至周五)</li>
                  <li>9:00-18:00(周六、周日)</li>
                  <li>联系客服 在线留言</li>
               </ul>
               <ul>
                  <h3>新手指南</h3>
                  <li>购物流程</li>
                  <li>会员介绍</li>
                  <li>互动联盟</li>
                  <li>联系我们</li>
                  <li>常见问题</li>
               </ul>
               <ul>
                  <h3>付款方式</h3>
                  <li>网上支付</li>
                  <li>会员介绍</li>
                  <li>互动联盟</li>
                  <li>联系我们</li>
                  <li>常见问题</li>
               </ul>
               <ul>
                  <h3>订单处理配送</h3>
                  <li>购物流程</li>
                  <li>会员介绍</li>
                  <li>互动联盟</li>
                  <li>联系我们</li>
                  <li>常见问题</li>
               </ul>
               <ul>
                  <h3>售后服务</h3>
                  <li>购物流程</li>
                  <li>会员介绍</li>
                  <li>互动联盟</li>
                  <li>联系我们</li>
                  <li>常见问题</li>
               </ul>
               <ul >
                  <h3>特色服务</h3>
                  <li>购物流程</li>
                  <li>会员介绍</li>
                  <li>互动联盟</li>
                  <li>联系我们</li>
                  <li>常见问题</li>
               </ul>
               <ul>
                  <h3>关于我们</h3>
                  <li>购物流程</li>
                  <li>会员介绍</li>
                  <li>互动联盟</li>
                  <li>联系我们</li>
                  <li>常见问题</li>
               </ul>
          </div>
          <div class="f1-bottom">
              <ul>
                  <li>首页|</li>
                  <li>关于我们|</li>
                  <li>诚聘英才|</li>
                  <li>联系我们|</li>
                  <li>网站联盟|</li>
                  <li>网站地图|</li>
              </ul>
          </div>
       </div>
	</footer>
</body>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.get("http://localhost:6500/books",function(data){
	for(var i = 0; i<data.length;i++){
		$("<dl><dt><img src='"+data[i].pic+"'></dt><dd><h5>"+data[i].bookname+"</h5><p>"+data[i].subname+"</p><a>[0人评价]</a><div class='d1'><span>vip价:"+data[i].vipprice+"</span><del>￥"+data[i].price+"</del><span><img src='images/result_buy.jpg'><img src='images/result_tuan.jpg'><img src='images/result_fav.jpg'></span></div></dd></dl>").appendTo($(".nie"));
	}
})
</script>
</html>